<template>
  <el-dialog 
    :model-value="visible" 
    @update:model-value="$emit('update:visible', $event)" 
    title="用户等级管理" 
    width="500px"
    :before-close="handleClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="用户姓名">
        <el-input v-model="form.name" disabled />
      </el-form-item>
      
      <el-form-item label="当前等级">
        <el-tag :type="getLevelTagType(form.userLevel)">
          {{ getLevelText(form.userLevel) }}
        </el-tag>
      </el-form-item>
      
      <el-form-item label="当前积分">
        <el-input v-model="form.points" disabled />
      </el-form-item>
      
      <el-form-item label="调整等级" prop="userLevel">
        <el-select v-model="form.userLevel" placeholder="请选择新的等级" style="width: 100%">
          <el-option label="普通用户" :value="1">
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <span>普通用户</span>
              <el-tag type="info" size="small">等级1</el-tag>
            </div>
          </el-option>
          <el-option label="VIP用户" :value="2">
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <span>VIP用户</span>
              <el-tag type="warning" size="small">等级2</el-tag>
            </div>
          </el-option>
          <el-option label="高级VIP" :value="3">
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <span>高级VIP</span>
              <el-tag type="danger" size="small">等级3</el-tag>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="调整积分" prop="points">
        <el-input-number 
          v-model="form.points" 
          :min="0" 
          :max="999999" 
          style="width: 100%"
          placeholder="请输入新的积分"
        />
      </el-form-item>
      
      <el-form-item label="等级说明">
        <div class="level-description">
          <div class="level-item">
            <el-tag type="info" size="small">普通用户</el-tag>
            <span>基础服务，享受标准价格</span>
          </div>
          <div class="level-item">
            <el-tag type="warning" size="small">VIP用户</el-tag>
            <span>享受9折优惠，优先预约</span>
          </div>
          <div class="level-item">
            <el-tag type="danger" size="small">高级VIP</el-tag>
            <span>享受8折优惠，专属服务</span>
          </div>
        </div>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: Boolean,
  user: { type: Object, default: () => ({}) }
})

const emit = defineEmits(['update:visible', 'submit'])

const formRef = ref(null)
const loading = ref(false)

const form = reactive({
  userId: '',
  name: '',
  userLevel: 1,
  points: 0
})

// 监听用户数据变化
watch(() => props.user, (val) => {
  if (val && Object.keys(val).length) {
    Object.assign(form, val)
  } else {
    Object.assign(form, {
      userId: '',
      name: '',
      userLevel: 1,
      points: 0
    })
  }
}, { immediate: true })

// 获取等级标签类型
const getLevelTagType = (level) => {
  switch (level) {
    case 1: return 'info'
    case 2: return 'warning'
    case 3: return 'danger'
    default: return 'info'
  }
}

// 获取等级文本
const getLevelText = (level) => {
  switch (level) {
    case 1: return '普通用户'
    case 2: return 'VIP用户'
    case 3: return '高级VIP'
    default: return '普通用户'
  }
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
  formRef.value?.resetFields()
}

// 提交表单
const handleSubmit = async () => {
  await formRef.value.validate()
  loading.value = true
  
  try {
    emit('submit', { ...form })
  } catch (error) {
    ElMessage.error('操作失败')
  } finally {
    loading.value = false
  }
}

// 表单验证规则
const rules = {
  userLevel: [
    { required: true, message: '请选择用户等级', trigger: 'change' }
  ],
  points: [
    { required: true, message: '请输入积分', trigger: 'blur' },
    { type: 'number', min: 0, message: '积分不能小于0', trigger: 'blur' }
  ]
}
</script>

<style scoped>
.level-description {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 12px;
  background-color: #fafafa;
}

.level-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.level-item:last-child {
  margin-bottom: 0;
}

.level-item span {
  color: #606266;
  font-size: 14px;
}
</style> 